<template>
    <div class="my-calendar">
        <ul class="calendar-left">
            <li>甬矽周</li>
            <li v-for="(item, index) in YXWeek" :key="index">
                <button :class="{ isWeek: item.isselect == 1 }">WW{{ item.week }}</button>
            </li>
        </ul>
        <div class="calendar-right">
            <div class="calendarControl">
                <i class="el-icon-d-arrow-left" @click="prevYear"></i>
                <i class="el-icon-arrow-left prevMonth" @click="prevMonth"></i>
                <i class="el-icon-arrow-right nextMonth" @click="nextMonth"></i>
                <i class="el-icon-d-arrow-right" @click="nextYear"></i>
            </div>
            <el-calendar v-model="value" class="custom-calendar">
                <template slot="dateCell" slot-scope="{date, data}">
                    <div :class="['calendarBox', data.isSelected ? 'is-selected' : '', isRestDay(data.day) ? 'rest-day' : '']" @click="handleDateClick(date)">
                        <!-- <p>{{ Number(data.day.split('-')[2]) }}</p><span class="lunar">{{ lunarDateMap[date.toDateString()] }}</span> -->
                        <p>{{ Number(data.day.split('-')[2]) }}</p>
                        <span v-if="isRestDay(data.day)">·</span>
                    </div>

                </template>
            </el-calendar>
        </div>
    </div>
</template>

<script>
import { Lunar } from 'lunar-javascript';
import {
    geYXWeek,
    getVacation,
    getDays
} from '@/api/index'
export default {
    name: 'LunarCalendar',
    data() {
        return {
            value: new Date(),
            lunarDateMap: {},
            restDays: [],
            firstMondayOfCurrentMonth: null,
            YXWeek: '',
        };
    },
    methods: {
        // 是否是设定日
        isRestDay(day) {
        

            return this.restDays.includes(day);
        },
        handleDateClick(date) {
            const formattedDate = date.toLocaleDateString('en-CA');
            this.$emit('message-for-calendar', formattedDate);
            console.log(formattedDate);
        },
        // 更新给定日期的农历信息
        handleCalendarChange(date) {
            this.updateLunarDate(date);
            this.updateFirstMondayOfCurrentMonth(date);

        },
        // 更新整个月的农历信息
        updateLunarDate(date) {
            const startDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
            const endDate = new Date(date.getFullYear(), date.getMonth() + 2, 0);
            for (let day = new Date(startDate); day <= endDate; day.setDate(day.getDate() + 1)) {
                const lunar = Lunar.fromDate(day);
                this.$set(this.lunarDateMap, day.toDateString(), `${lunar.getDayInChinese() == '初一' ? lunar.getMonthInChinese() + '月' : ''}${lunar.getDayInChinese() != '初一' ? lunar.getDayInChinese() : ''}`);
            }
        },

        // 更新当前月份第一行星期一的日期
        updateFirstMondayOfCurrentMonth(date) {
            const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
            const dayOfWeek = firstDayOfMonth.getDay();
            const firstMonday = new Date(firstDayOfMonth);
            firstMonday.setDate(firstDayOfMonth.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));
            this.geYXWeek(this.formatDate(firstMonday));
        },

        // 格式化日期为YYYY-MM-DD格式
        formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },

        // 切换到上一年
        prevYear() {
            const currentYear = this.value.getFullYear();
            this.value = new Date(currentYear - 1, this.value.getMonth(), this.value.getDate());
            this.updateLunarDate(this.value);
            this.updateFirstMondayOfCurrentMonth(this.value);
        },
        // 切换到下一年
        nextYear() {
            const currentYear = this.value.getFullYear();
            this.value = new Date(currentYear + 1, this.value.getMonth(), this.value.getDate());
            this.updateLunarDate(this.value);
            this.updateFirstMondayOfCurrentMonth(this.value);
        },
        // 切换到上个月
        prevMonth() {
            const currentYear = this.value.getFullYear();
            const currentMonth = this.value.getMonth();
            if (currentMonth === 0) {
                this.value = new Date(currentYear - 1, 11, this.value.getDate());
            } else {
                this.value = new Date(currentYear, currentMonth - 1, this.value.getDate());
            }
            this.updateLunarDate(this.value);
            this.updateFirstMondayOfCurrentMonth(this.value);
        },
        // 切换到下个月
        nextMonth() {
            const currentYear = this.value.getFullYear();
            const currentMonth = this.value.getMonth();
            if (currentMonth === 11) {
                this.value = new Date(currentYear + 1, 0, this.value.getDate());
            } else {
                this.value = new Date(currentYear, currentMonth + 1, this.value.getDate());
            }
            this.updateLunarDate(this.value);
            this.updateFirstMondayOfCurrentMonth(this.value);

        },

        // 获取甬矽周
        geYXWeek(week) {
            const _this = this;
            geYXWeek(_this.sid,week)
                .then(response => {
                    this.YXWeek = response.data
                })
                .catch(error => {
                    console.error('获取甬矽周失败', error);
                    if (error.response && error.response.data && error.response.data.errorCode === '400') {
                        console.error(error.response.data.msg);
                    }
                });
        },
        // 获取日历日程
        getDays() {
            const _this = this;
            getDays(_this.sid)
                .then(response => {
                    _this.restDays = response.data.restDays;
                })
                .catch(error => {
                    console.error('获取日历日程失败', error);
                    if (error.response && error.response.data && error.response.data.errorCode === '400') {
                        console.error(error.response.data.msg);
                    }
                });
        }
    },
    mounted() {
        this.sid = this._sid;
        this.handleDateClick(new Date())
        this.updateLunarDate(new Date());
        this.updateFirstMondayOfCurrentMonth(new Date());
        this.getDays();
    },
};
</script>

<style lang="scss" scoped>
.my-calendar {
    display: flex;

    .calendar-left {
        list-style-type: none;
        width: 0.8rem;
        height: 3.6rem;
        padding-top: 0.4rem;
        background-color: transparent;

        li {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.5rem;
            font-size: 0.1777777778rem;
        }

        li:first-child {
            height: 0.46rem;
        }

        li:nth-child(n + 2) {
            button {
                padding: 2px;
                background-color: #DCE5FA;
                color: #80A2EB;
                border: none;
                border-radius: 5px;
                padding: 2px 5px;
                font-size: 0.15rem;
                font-family: 'Arial Narrow';

            }

            .isWeek {
                background-color: #5481E5;
                color: #fff;
            }
        }
    }

    .calendar-right {
        width: 3.8rem;
        position: relative;

        .rest-day {
            background-color: #EDEDED;
        }

        ::v-deep .el-calendar {
            border: none;

            .el-calendar__header {
                border-bottom: none;
                padding: 0.078125rem 0.15625rem;
                padding-left: 0.95rem;
            }

            .el-calendar-table {
                th {
                    border-bottom: none;
                }

                td {
                    border: none;
                }

                td.is-selected {
                    background-color: transparent;
                    ;
                    border-radius: 5px;
                }
            }
        }

        .calendarControl {
            position: absolute;
            top: 0.068125rem;
            left: 0.3rem;

            i {
                padding: 0;
                font-size: 0.2rem;
                border: none;
                color: #aeaeae;
                cursor: pointer;
                font-weight: bold;
            }

            i:hover {
                color: #83A4EC;
            }
        }

        .el-calendar {
            font-size: 0.2rem;
            font-weight: bold;
            background-color: transparent;
        }

        ::v-deep .el-calendar__button-group {
            display: none;
        }

        ::v-deep .el-calendar__header {
            align-items: center;
        }

        .prevMonth {
            margin-right: 0.8rem;
        }

        .nextMonth {
            margin-left: 0.8rem;
        }

        ::v-deep .el-calendar__body {
            padding: 0;

            th {
                font-size: 0.1777777778rem;
                padding: 0.109375rem 0;
            }

            .el-calendar-day {
                height: 0.525rem;
                padding-top: 0;
                display: flex;
                justify-content: center;

                .calendarBox {
                    padding: 0.07rem;
                    border-radius: 5px;

                    span {
                        display: inline-block;
                        vertical-align: top;
                        line-height: 5px;
                    }
                }

                .calendarBox:hover {
                    background-color: #E2EAFB;
                    color: #2C64DF;

                    span {
                        color: #2C64DF;
                    }
                }

                .is-selected {
                    background-color: #2C64DF;
                    color: white;

                    span {
                        color: white;
                    }
                }
            }

            .el-calendar-day:hover {
                background-color: transparent;

            }
        }
    }

    .calendar-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .lunar {
        font-size: 0.1777777778rem;
        color: #aaa;
    }
}
</style>
